<template>
	<view class="wrap">
		<view class="header1">
			<view class="userinfo">
				<view class="image" @click="navTo('info')">
					<u-avatar size="100" src="/static/aidex/images/user01.png"></u-avatar>
				</view>
				<view class="info" >
					<view>
						<view class="username">管理员</view>
						<view class="usercode">普通会员</view>
					</view>
					<view class="sign-in-images more">
						头像修改
						<image class="u-m-l-10" src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
						
					</view>
				</view>
			</view>
			
		</view>
		<view class="list">
			<view class="navList">
				
				<view class="item">
					<view @click="navTo('/subPack/mine/alipay')" class="left">
						<view class="icon">
							<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Alipay.png" mode=""></image>
						</view>
						支付宝账号绑定
					</view>
					<view class="more">
						<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view @click="navTo('/subPack/mine/card')" class="left">
						<view class="icon">
							<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Alipay.png" mode=""></image>
						</view>
						银行卡账号绑定
					</view>
					<view class="more">
						<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Bank-card.png" mode=""></image>
						</view>
						服务开通续费
					</view>
					<view class="more">
						<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Expenses-one.png" mode=""></image>
						</view>
						服务购买记录
					</view>
					<view class="more">
						<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/History.png" mode=""></image>
						</view>
						密码修改
					</view>
				<view class="more">
					<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
				</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Lock.png" mode=""></image>
						</view>
						设置
					</view>
					<view class="more">
						<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/narrow.png" mode=""></image>
					</view>
				</view>
				
				<!-- <u-button class="button" @click="submit" :ripple="true" ripple-bg-color="#d7d8da">退出当前账号</u-button> -->
				
				
				<view class="button">
					<u-button shape="circle"  :ripple="true" ripple-bg-color="#d7d8da" type="error">退出当前账号</u-button>
				</view>
				<!-- <u-cell-group class="personal-list">
					
					<u-cell-item icon="question-circle" :iconStyle="{ color: '#ff8d06' }" title="常见问题"
						@click="navTo('problem')"></u-cell-item>
					<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#5f8dff' }" title="意见反馈"
						@click="navTo('comment')"></u-cell-item>
					<u-cell-item icon="map" :iconStyle="{ color: '#316ede' }" title="账号安全" @click="navTo('pwd')">
					</u-cell-item>
					<u-cell-item icon="order" :iconStyle="{ color: '#59bdf9' }" title="清除缓存"
						@click="navTo('clear-cache')"></u-cell-item>
					<u-cell-item icon="account" :iconStyle="{ color: '#27c0dc' }" title="关于我们" @click="navTo('about')">
					</u-cell-item>
					<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#ff8a00' }" title="联系客服"
						@click="navTo('service')"></u-cell-item>
					
				</u-cell-group> -->
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				iconSize: 38
			};
		},
		computed: {
			avatarUrl() {
				// let url = this.vuex_user.avatarUrl || '/ctxPath/static/images/user1.jpg';
				// url = url.replace('/ctxPath/', this.vuex_config.baseUrl + '/');
				let url = this.vuex_config.baseUrl + this.vuex_user.avatar || '/static/aidex/tabbar/my_2.png';
				url = this.replaceAll(url, '\\', '/');
				return url + '?t=' + new Date().getTime();
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			logout() {
				this.$u.api.logout().then(res => {
					this.$u.toast(res.msg);
					if (res.code == '200' || res.code == '401') {
						let self = this;
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/sys/login/index'
							});
						}, 500);
					}
				});
			},
			
		}
	};
</script>
<style lang="scss">
	@import 'index.scss';
	.wrap{
		background: #fff;
		min-height: 100vh;
	}
	.wrap .u-cell-box .u-cell_title {
		color: #202328;
	}
	.more{
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.button {
		
		
		// display: flex;
		// align-items: center;
		// justify-content: center;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: #FAFDFF;
		// line-height: 44rpx;
		// text-align: left;
		font-style: normal;
		text-transform: none;
		height: 80rpx !important;
		background: #FA4A53 !important;
		box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		margin: 0 40rpx 0;
		
		// overflow: hidden;
		// .u-size-default{
		// 	outline: none;
		// 	border-radius: 44rpx 44rpx 44rpx 44rpx !important;
		// 	width: 100%;
		// 	height: 100%;
		// 	background-color: #FA4A53 !important;
		// 	color: #FAFDFF !important;
		// 	border-color: none !important;
		// }
	}
	.navList{
		padding: 0 48rpx;
		.item{
			margin-bottom: 84rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				flex: 1;
				display: flex;
				align-items: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 32rpx;
				color: #0F1417;
				font-style: normal;
				text-transform: none;
				.icon image{
					display: block;
					width: 48rpx;
					height: 48rpx;
					// margin-top: 2px;
					margin-right: 24rpx;
				}
			}
			
			.right{
				
			}
		}
	}
	// /deep/ .personal-list .u-cell .u-iconfont{
	// 	font-size: 14rpx !important;
	// }
	.sign-in-images{
display: flex;
				align-items: center;
	}

	
</style>
